<template>
  <div class="tab">
    <div class="card" v-for="item in headData" :key="item.label">
      <div class="card-left">
        <svgIcon name="pig" width="50px" height="50px"></svgIcon>
      </div>
      <div class="card-right">
        <div class="label">
          {{ item.label }}
        </div>
        <div class="value">
          {{ item.value }}
        </div>
        <div class="icon"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  perHouseholdInfo: {
    type: String,
    default: ''
  }
})

// 响应式 headData
const headData = ref([])

watchEffect(() => {
  headData.value = [
    {
      label: '存栏',
      value: props.info.stockNum || '0'
    },
    {
      label: '死淘',
      value: props.info.deadNum || '0'
    },
    {
      label: '进苗',
      value: props.info.collarSeedlingNum || '0'
    },
    {
      label: '上市',
      value: props.info.beListedNum || '0'
    },
    {
      label: '尾猪',
      value: props.info.tailPigNum || '0'
    },
    {
      label: '死淘率',
      value: props.info.deadRate || '0'
    },
    {
      label: '存栏盘点异常户占比',
      value: props.info.rearerNum || '0'
    },
    {
      label: '户均尾猪处理天数',
      value: props.perHouseholdInfo || '0'
    }
  ]
})
</script>

<style scoped lang="scss">
.tab {
  margin: 20px 0 30px;
  width: 100%;
  height: 140px;
  padding: 0 43px;
  display: flex;
  justify-content: space-between;

  .card {
    padding: 10px 15px;
    width: 100%;
    height: 140px;
    font-size: 16px;
    background: url('@/assets/u2385.svg');
    display: flex;

    &-left {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-right {
      flex: 1;

      .value {
        line-height: 40px;
        font-size: 30px;
        font-weight: bold;
      }

      .icon {
        height: 30px;
        background: url('@/assets/u2390.svg') no-repeat center center;
      }
    }

    &:not(:last-child) {
      margin-right: 4px;
    }
  }
}
</style>
